<template>
  <!--患者信息 Header -->
  <a-modal :open="open" width="840px" class="" :title="title" cancel-text="关闭" :ok-button-props="{ hidden: true }" centered @ok="onCancel" @cancel="onCancel">
    <div class="patient-info-header">
      <div class="flex justify-between items-center">
        <a-avatar :size="48" :src="avatarMan" />
        <div class="text-xl font-semibold w-[80px] truncate ml-2">{{ formState?.empName || '-' }}</div>
        <div class="w-[50px]">{{ formState?.sex || '-' }}</div>
        <div class="w-[120px]">{{ formState?.ksmc || '-' }}</div>
        <div class="w-[100px]">{{ formState?.phone || '-' }}</div>
        <div class="flex-1"></div>
      </div>
    </div>

    <div class="w-full mt-2">
      <BaseTable
        :data-source="tableData"
        class="h-[320px]"
        height="230"
        :pagination="{ total: page.total, current: page.current, pageSize: page.pageSize }"
        :loading="loading"
        :columns="columns"
        @change="onPageChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'yyrq'"> {{ record.yyrq }} {{ record.yysj }} </template>
        </template>
      </BaseTable>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import avatarMan from '@/assets/images/avatar-man.png'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  userData: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: ''
  }
})
const tableData = ref([])
const loading = ref(false)
const page = ref({
  total: 0,
  current: 1,
  pageSize: getSystemConfig('DFFAULT_PAGE_SHOW_COUNT') || 10
})
const columns = ref([
  { title: '序号', dataIndex: 'xh', width: '50px' },
  { title: '日期', dataIndex: 'yyrq', ellipsis: 'true' },
  { title: '服务项目', dataIndex: 'itemName', ellipsis: 'true' },
  { title: '数量', dataIndex: 'sl' },
  { title: '姓名', dataIndex: 'brName' },
  { title: '性别', dataIndex: 'brXb', width: '50px' },
  { title: '年龄', dataIndex: 'brAge', width: '50px' },
  { title: '手机号', dataIndex: 'brMob', ellipsis: 'true' }
])

const queryList = async () => {
  loading.value = true
  const { data, code, total } = await post('/course/statisticalQuery/getAssistantEmpDetailList', {
    empId: formState.value.empId,
    itemCode: formState.value.itemCode,
    pageNum: page.value.current,
    pageSize: page.value.pageSize,
    endTime: props.userData.endTime,
    startTime: props.userData.startTime,
    assistantEmpId: props.userData.assistantEmpId
  })
  loading.value = false
  if (code === 0) {
    tableData.value = data
    page.value.total = total
  }
}
const onPageChange = ({ current, pageSize }) => {
  page.value.current = current
  page.value.pageSize = pageSize
  queryList()
}
const formState = ref(null)

watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.userData?.empId) {
        formState.value = { ...props.userData }
      }
      queryList()
    }
  }
)
const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
.patient-info-header {
  padding: 8px 12px;
  // color: var(--primary-color);
  background-color: var(--secondary-color);
  border-radius: 5px;
  :deep(.ant-badge-count) {
    top: auto;
    right: 6px;
    bottom: 0;
    background-color: var(--primary-color);
    box-shadow: none;
  }
}
</style>
